'use client';

import React from 'react';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import TraceViewer from '@/components/TraceViewer';

interface TracePageProps {
  params: {
    sessionId: string;
  };
}

export default function TracePage({ params }: TracePageProps) {
  const { sessionId } = params;
  // 这里应该从 URL 参数或配置中获取 chatflowId
  const chatflowId = process.env.NEXT_PUBLIC_CHATFLOW_ID || 'default-chatflow';

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center h-16">
            <Link
              href="/admin"
              className="flex items-center space-x-2 text-gray-600 hover:text-gray-900 transition-colors mr-6"
            >
              <ArrowLeft className="w-5 h-5" />
              <span>返回管理后台</span>
            </Link>
            
            <div className="flex items-center">
              <h1 className="text-xl font-semibold text-gray-900">
                执行追踪详情
              </h1>
              <span className="ml-4 px-2 py-1 bg-gray-100 text-gray-600 text-sm rounded">
                会话: {sessionId}
              </span>
            </div>
          </div>
        </div>
      </nav>

      {/* 主内容区域 */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <TraceViewer
          chatflowId={chatflowId}
          sessionId={sessionId}
        />
      </main>
    </div>
  );
}
